<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<div>
				<span>n的值：{{n}}</span>
				<button @click="n = n+1">更新数据n</button>
			</div>
			<div>
				<input type="text" v-fbind:value="n"/>
			</div>
		</div>
		
		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					n: 1
				},
				directives: {
					// 对象式定义治理
					fbind: {
						// 指令与元素成功绑定时调用的函数
						bind(element,binding) {
							console.log('指令与元素绑定');
							// 设置元素的value值
							element.value = binding.value
						},
						// 指令所在的元素被放入页面时调用的函数
						inserted(element,binding) {
							console.log('元素插入页面');
							// 设置元素自动获取焦点
							element.focus()
						},
						// 指令所在元素所处的模板被更新时调用的函数
						update(element,binding) {
							console.log('指令所在元素所处的模板被更新');
							// 需要重新设置value值
							element.value = binding.value
							// 重新设置自动获取焦点
							element.focus()
						}
					}
				}
			})
		</script>
	</body>
</html>